<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="#(path)/static/pub/layui/css/layui.css">


    <script src="#(path)/static/pub/layui/layui.js"></script>
</head>
<body>

<!-- 你的HTML代码 -->

<div id="nav" > APKTOOL </div>


<div id="uploaddiv">
    <p class="center-block">
        <button type="button" class="layui-btn" id="uploadbutton">
            <i class="layui-icon">&#xe67c;</i>上传apk包
        </button>


        <div id="uploadprogress" class="layui-progress" lay-filter="uploadprogress" lay-showpercent="true" >
            <div class="layui-progress-bar" lay-percent="0%" ></div>
        </div>
    </p>
</div>

<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

        //layer.msg('Hello World');
    });
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function(){
        //var  element = layui.element;

       // element.progress('uploadprogress', 50); //可配合 layui 进度条元素使用
    });


    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadbutton' //绑定元素
            ,url: '/web/index/upload' //上传接口
            ,accept: 'file'

            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            ,done: function(res, index, upload){
                layer.closeAll('loading'); //关闭loading
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
            }
            ,progress: function(n, elem){

                layui.use('element', function(){
                    var  element = layui.element;
                    var percent = n + '%' //获取进度百分比
                    element.progress('uploadprogress', percent); //可配合 layui 进度条元素使用
                });

                //以下系 layui 2.5.6 新增
               // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
            }
        });
    });

</script>

<style>
    #nav
    {
        background-color:#d0e4fe;
        font-family:"Times New Roman";
        font-size:40px;
        text-align:center;
        color: white;
        background-color: #009688;
    }


    #uploaddiv {
        height:100px;
        border: 2px dashed #f69c55;
        margin-top: 50px;
    }
    .center-block {
        margin: 0 auto;
        width: 8rem;
        padding:1rem;
        color:#fff;

    }
    #uploadprogress {
        margin: 0 auto;
        width: 80%;

    }
</style>
</body>
</html>